<template>
  <view class="main status-bar">
    <view class="login">
      <uni-icons type="closeempty" size="30" color="#838288"></uni-icons>

      <view class="title">登录</view>

      <view class="form-wrap">
        <input
          v-model="formData.username"
          placeholder="请输入用户名"
          placeholder-class="input-placeholder"
        />

        <input
          v-model="formData.password"
          placeholder="请输入用户名"
          placeholder-class="input-placeholder"
        />
        <view class="verify-code-wrap">
          <input
            v-model="formData.verifyCode"
            placeholder="请输入验证码"
            placeholder-class="input-placeholder"
          />
          <image class="verify-code-img" src="" mode="widthFix" />
        </view>

        <CommButton :on-submit="onLoginSubmit">登录</CommButton>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import type { reqLoginBody } from '@/types/member'
import type CommButton from '@/components/CommButton.vue'

const formData = reactive<reqLoginBody>({
  username: '',
  password: '',
  verifyCode: '',
})

const onLoginSubmit = () => {}
</script>

<style lang="scss" scoped>
.login {
  padding: 48rpx;

  .title {
    margin-top: 120rpx;
    font-size: 50rpx;
    font-weight: bold;
  }

  .form-wrap {
    padding: 170rpx 20rpx;
    input {
      width: 100%;
      height: 80rpx;
      border-bottom: 1rpx solid #eeeeee;
      font-size: 30rpx;
      margin-top: 20rpx;
    }
    .verify-code-wrap {
      display: flex;
      align-items: center;
      .verify-code-img {
        width: 200rpx;
        height: 70rpx;
        flex-shrink: 0;
        margin-left: 10rpx;
      }
    }
  }
}
</style>
